import Vue from "vue";
import Vuex from "vuex";

import * as permissApi from "@/api/permission"
import * as api from "@/api/users"
//引入动态路由
import dynamicRoutes from "@/router/dynamicRoutes"
//引入路由
import router from "@/router"
//所有的路由
import allRoutes from "@/router/generateRoutes"
//生成用户路由的递归函数
import recursionRoutes from "@/utils/recursionRoutes"
//引入持久化存储
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userMenu: [],
    userInfo: {},    //用户的信息
    currentProduct: {},   //当前充值的产品对象
    breadCrumb: [], // 面包屑数据
    sideMenu: [],  //侧边栏菜单
    dialogVisible: false, //控制dialog显示
    dialogTitle: '增加学员信息',   //标题
    stuData: [],
    stuTotal: 0,    //总条目
    stuPagesSize: 10    //每页显示的数量
  },
  getters: {},
  mutations: {
    //设置用户菜单
    SET_MENULIST(state, payload) {
      state.userMenu = [...payload]//浅拷贝
      ////动态添加路由,引入dynamic路由,进行匹配,匹配到path==='/'这个对象,让我们的用户路由中的结果,成为这个对象的children
      let target = dynamicRoutes.find(route => route.path === "/");
      //console.log(payload)
      target.children = [...target.children, ...payload]
      //动态的将路由添加到路由的routes选项中
      //router.addRoute 动态添加路由，参数是一个对象，这个对象必须符合route的配置
      router.addRoute(target)
    },
    //修改用户信息
    SET_USERINFO(state, payload) {
      state.userInfo = payload
    },
    //设置当前充值的产品
    SET_CURRENT_PRODUCT(state, payload) {
      state.currentProduct = payload
    },
    //设置面包屑
    SET_BREADCRUMB(state, payload) {
      state.breadCrumb = payload
    },
    //设置dialog弹出框
    //显示
    SHOW_DIALOG(state) {
      state.dialogVisible = true
    },
    //隐藏
    HIDE_DIALOG(state) {
      state.dialogVisible = false
    },
    //更改标题信息
    CHANGE_DIALOG_TITLE(state, payload) {
      state.dialogTitle = payload
    },
    //设置学员项目管理列表的数据
    SET_STU_DATA(state, payload) {
      state.stuData = payload.data   //设置学员列表
      state.loading = false  //关闭加载动画
      state.stuTotal = payload.total   //设置学员分页总数
    },
    //表格显示loading动画
    SHOW_LOADING(state) {
      state.loading = true
    },
    //表格隐藏loading动画
    HIDE_LOADING(state) {
      state.loading = false
    }
  },
  actions: {
    //请求菜单数据,根据菜单数据
    //1.计算出角色(role)的菜单
    //2.计算出当前这个角色的合法路由

    //获取用户菜单
    async FETCH_MENULIST(context, payload) {
      return permissApi.getMenuList().then(res => {
        // console.log(res)
        //后端返回的菜单数据
        let { menuList } = res.data;
        //调用recursionRoutes
        //console.log(allRoutes[1].children)
        let userRoutes = recursionRoutes(allRoutes[1].children, menuList)
        //console.log(userRoutes)
        //让mutation进行处理
        context.commit('SET_MENULIST', userRoutes)
      })
    },
    //获取学员列表
    GET_STULIST({ commit }, payload = {}) {
      commit("SHOW_LOADING")   //打开加载动画
      //解构传递的参数
      let { page = 1, count = 10, classes = "" } = payload
      api.getStuListApi(page, count, classes)
        .then(res => {
          commit('SET_STU_DATA', res.data)
        })
    }
  },
  modules: {},
  /* vuex数据持久化配置 */
  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.localStorage,
      // 存储的 key 的key值
      key: "myx2",
      paths: ["userInfo", "currentProduct"]
    })
  ]
});
